<template>
  <div class="page">
    <div>
      <div class="title_1_ctx1">
        <div class="title_1_ctx2">
          <span>类型：</span>
          <el-select v-model="quanTable.searchScheme" size="mini" clearable style="width: 80px">
            <el-option label="沙龙" :value="1"></el-option>
            <el-option label="客情" :value="2"></el-option>
            <el-option label="生日" :value="3"></el-option>
          </el-select>
          <span>简介：</span>
          <el-input
            v-model="quanTable.searchBrief"
            size="mini"
            clearable
            style="width: 180px"
            placeholder="模糊查询全案简介"
            prefix-icon="el-icon-search"></el-input>
          <el-button v-if="quanTable.dataListLoading" size="mini" type="success" disabled icon="el-icon-loading">
            搜索
          </el-button>
          <el-button v-else size="mini" type="success" @click.stop="loadQuanAnList">搜索</el-button>
        </div>
        <div class="title_1_ctx1_1" style="width: 82vw">
          <el-table
            ref="refTable"
            v-loading="quanTable.dataListLoading"
            :data="quanTable.dataList"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row>
            <el-table-column fixed label="类型" align="center" width="80">
              <template slot-scope="{ row }">
                <div v-if="row.scheme === 1" style="color: #724eff">沙龙</div>
                <div v-if="row.scheme === 2" style="color: #f29339">客情</div>
                <div v-if="row.scheme === 3" style="color: #469b78">生日</div>
              </template>
            </el-table-column>
            <el-table-column label="状态" align="center" width="80">
              <template slot-scope="{ row }">
                <div v-if="row.sts === 3" style="color: rgb(255, 159, 70)">已下架</div>
                <div v-if="row.sts === 2" style="color: #67c23a">已上架</div>
                <div v-if="row.sts === 1">创建中</div>
                <div v-if="row.sts === 0">未知</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="brief"
              label="简介"
              align="center"
              width="600"
              show-overflow-tooltip></el-table-column>
            <el-table-column label="方案" align="center" width="80">
              <template slot-scope="{ row }">
                <div v-if="row.proposal">已上传</div>
                <div v-else>未上传</div>
              </template>
            </el-table-column>
            <el-table-column prop="createDate" label="创建时间" align="center" width="120">
              <template slot-scope="{ row }">
                {{ row.createDate ? row.createDate.substring(0, 10) : '' }}
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="200">
              <template slot-scope="{ row }">
                <el-button
                  type="info"
                  size="mini"
                  plain
                  :disabled="!row.proposal"
                  @click.stop="handleShowProposal(row)">
                  查看方案
                </el-button>
                <el-button type="info" size="mini" plain @click.stop="handleShowClerkList(row)">查看顾客</el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="quanTable.total > 0"
            :total="quanTable.total"
            :page.sync="quanTable.pageParam.page"
            :limit.sync="quanTable.pageParam.limit"
            @pagination="loadQuanAnList"></pagination>
        </div>
      </div>
    </div>

    <el-dialog title="适合参加的顾客" :visible.sync="popQuan.showMe" width="60%">
      <el-table
        v-loading="popQuan.isLoading"
        :data="popQuan.clerkList"
        element-loading-text="Loading"
        fit
        highlight-current-row>
        <el-table-column fixed prop="cname" label="顾客姓名" align="center" width="100"></el-table-column>
        <el-table-column fixed label="性别" align="center" width="60">
          <template slot-scope="{ row }">
            <div v-if="row.sex === 2">其他</div>
            <div v-if="row.sex === 1">女</div>
            <div v-if="row.sex === 0">男</div>
          </template>
        </el-table-column>
        <el-table-column label="重点" fixed align="right" width="70">
          <template slot-scope="{ row }">
            <i v-if="row.noble === 2" class="el-icon-star-on" style="color: red"></i>
          </template>
        </el-table-column>
        <el-table-column label="信任等级" align="center" width="80" class-name="small-padding fixed-width">
          <template slot-scope="{ row }">
            <div v-if="row.trust2 === 3">已信任</div>
            <div v-if="row.trust2 === 2">已破冰</div>
            <div v-if="row.trust2 === 1">未破冰</div>
            <div v-if="row.trust2 === 0">未设置</div>
          </template>
        </el-table-column>
        <el-table-column label="消费能力" align="center" width="80" class-name="small-padding fixed-width">
          <template slot-scope="{ row }">
            <div v-if="row.bg2 === 3">没钱</div>
            <div v-if="row.bg2 === 2">普通</div>
            <div v-if="row.bg2 === 1">有钱</div>
            <div v-if="row.bg2 === 0">超有钱</div>
          </template>
        </el-table-column>
        <el-table-column label="消费等级" align="center" width="80" class-name="small-padding fixed-width">
          <template slot-scope="{ row }">
            <div v-if="row.grade === 4">S级</div>
            <div v-if="row.grade === 3">A级</div>
            <div v-if="row.grade === 2">B级</div>
            <div v-if="row.grade === 1">C级</div>
            <div v-if="row.grade === 0">未定</div>
          </template>
        </el-table-column>
        <el-table-column label="运营" align="center" width="80">
          <template slot-scope="{ row }">
            <span v-if="row.dengji === 3">放弃</span>
            <span v-if="row.dengji === 2" style="color: #f56c6c">失速</span>
            <span v-if="row.dengji === 1" style="color: #e6a23c">预警</span>
            <span v-if="row.dengji === 0" style="color: #67c23a">正常</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center" width="120" show-overflow-tooltip>
          <template slot-scope="{ row }">
            {{ row.createTime ? row.createTime.substring(0, 10) : '' }}
          </template>
        </el-table-column>
        <el-table-column prop="kname" label="所属管家" align="center" width="160"></el-table-column>
      </el-table>

      <pagination
        v-show="popQuan.total > 0"
        :total="popQuan.total"
        :page.sync="popQuan.pageParam.page"
        :limit.sync="popQuan.pageParam.limit"
        @pagination="getClerkList"></pagination>
    </el-dialog>
  </div>
</template>

<script>
import * as apiSts from '@/api/_com_';
// 引入后端 API
import { quananGetClerksPage } from '@/api/activity';
import * as qaApi from '@/api/quanan';
// 引入自定义组件
import Pagination from '@/components/Pagination';
// 引入第三方组件
import { MessageBox } from 'element-ui';
import { mapGetters } from 'vuex';

const EmptyQuanAn = {
  id: undefined,
  scheme: null, // 全案类型
  sts: 0,
  brief: null, // 简单的计划(文字描述)
  proposal: null, // 详细的计划(文档或者图片)
  tagExpression: '', // 标签表达式
  delable: false,
  createDate: '',
};

export default {
  name: 'QuanAnList',
  components: { Pagination },
  data() {
    return {
      quanTable: {
        // 全案列表
        dataList: [],
        dataListLoading: false,
        total: 0,
        pageParam: { page: 1, limit: 10 },
        searchBrief: '',
        searchScheme: undefined,
      },
      quanVo: Object.assign({}, EmptyQuanAn),
      popQuan: {
        qid: undefined,
        showMe: false,
        total: 0,
        clerkList: [],
        isLoading: false,
        pageParam: { page: 1, limit: 10 },
      },
    };
  },
  computed: {
    ...mapGetters(['name', 'id', 'deptId', 'openId']),
  },
  created() {},
  mounted() {
    this.loadQuanAnList();
  },
  methods: {
    handleShowProposal: async function (row) {
      if (!row.proposal) {
        this.$message.error('该全案没有上传方案');
        return;
      }
      // pdf 或者 txt
      const proposalUrl = `/pub/quanan/proposal?relativePath=${row.proposal}`;
      window.open(proposalUrl, '_blank');
    },
    handleShowClerkList: async function (row) {
      this.popQuan.qid = row.id;
      this.popQuan.showMe = true;
      this.getClerkList();
    },
    getClerkList: async function () {
      if (this.popQuan.isLoading) {
        return;
      }
      this.popQuan.isLoading = true;
      const errAlertMsg = '查询顾客列表失败';
      const params = {};
      params.pageNumber = this.popQuan.pageParam.page;
      params.pageSize = this.popQuan.pageParam.limit;
      params.qid = this.popQuan.qid;
      params.sid = this.openId;
      this.popQuan.clerkList.splice(0, this.popQuan.clerkList.length);
      await quananGetClerksPage(params)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          if (res.data.data) {
            this.popQuan.clerkList = res.data.data.records;
            this.popQuan.total = res.data.data.total;
          }
        })
        .catch(err => {
          console.error(err);
          MessageBox.alert(errAlertMsg);
        })
        .finally(() => {
          this.popQuan.isLoading = false;
        });
    },
    loadQuanAnList: async function () {
      if (this.quanTable.dataListLoading) {
        return;
      }
      this.quanTable.dataListLoading = true;
      const errAlertMsg = '查询全案列表失败';

      const params = {};
      params.pageNumber = this.quanTable.pageParam.page;
      params.pageSize = this.quanTable.pageParam.limit;
      params.pub = 1;
      if (this.quanTable.searchBrief) {
        params.brief = this.quanTable.searchBrief;
      }
      if (this.quanTable.searchScheme) {
        params.scheme = this.quanTable.searchScheme;
      }
      await qaApi
        .getQuanAnPage(params)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          if (res.data.data) {
            this.quanTable.dataList = res.data.data.records;
            this.quanTable.total = res.data.data.total;
          }
        })
        .catch(e => {
          console.log('getQuanAnPage', e);
          MessageBox.alert(errAlertMsg);
        })
        .finally(() => {
          this.quanTable.dataListLoading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/css/scrollbar.scss';
$font-family: 微软雅黑 宋体 思源黑体 Noto Sans SC-Medium;

::v-deep .el-table td {
  padding: 5px 0;
  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
}

.page {
  position: relative;
  width: 100%;
  height: 1920px;
  padding: 5px 10px 0 10px;
  font-family: $font-family;
  background-color: #f8f8fa;
  border-radius: 0px 0px 0px 0px;

  .title_1_ctx1 {
    width: 100%;
    padding: 0px 0px 0px 0px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;

    .title_1_ctx1_1 {
      display: block;
      text-align: left;
    }
  }

  .title_1_ctx1 tr {
    margin-top: 5px;
  }

  .title_1_ctx2 {
    width: 100%;
    padding: 0px 0px 0px 0px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
  }
}
</style>
